
<!DOCTYPE html> 
<html> 

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>Multi-page template</title> 
	<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.1.0.min.css" />
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile-1.1.0.min.js"></script>
	<script src="../../docs/_assets/js/jqm-docs.js"></script>
</head> 

	
<body> 

<!-- Start of first page: #one -->
<div data-role="page" id="foo">

	<div data-role="header">
		<h1>Multi-page</h1>
	</div><!-- /header -->
	
	<div data-role="content" id="one">	
		<h2>One</h2>
		<h3>Show internal pages:</h3>
		<p><a data-role="button" onclick="window.location.href='main.html'" >Show main</a></p>	
		<p><a data-role="button" onclick="window.location.href='setting.html'" >Show setting</a></p>		
		<p><a data-role="button" onclick="window.location.href='search.html'" >Show search</a></p>
		<p><a data-role="button" onclick="window.location.href='pack.html'" >Show pack</a></p>	
		<p><a data-role="button" onclick="window.location.href='common.html'">Show common</a></p>
		<p><a href="#popup"data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>

	</div><!-- /content -->
	
	<div data-role="footer" data-theme="d">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page one -->


<!-- Start of page: five -->
<div data-role="page" id="five" data-theme="a">

	<div data-role="header">
		<h1>Two</h1>
	</div><!-- /header -->

	<div data-role="content" data-theme="a">	
		<h2>Two</h2>
		<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>	
		<p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>	
		<p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p>	
		
	</div><!-- /content -->
	
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page two -->

<!-- Start of third page: #popup -->
<div data-role="page" id="popup">

	<div data-role="header" data-theme="e">
		<h1>Dialog</h1>
	</div><!-- /header -->

	<div data-role="content" data-theme="d">	
		<h2>Popup</h2>
		<p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p>		
		<p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p>	
	</div><!-- /content -->
	
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page popup -->

</body>
</html>
